<template>
    <div id="background">
        <el-container>
            <el-header id="lxtxHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back" />
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol">
                        <span class="titleSize">题库训练</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main id="lxtxMain"> 
                <el-row class="tklx">
                <el-row type="flex" class="lxbtn">
                    <button class="tklxbtn" @click="goDanXuan" style="width: 80%;">
                       <span class="tklxBtnWords">单选题</span>
                       <span class="tklxBtnWords">{{'('+danXuan+'/'+danXuanNum+')'}}</span>
                    </button>
                </el-row>
                <el-row type="flex" class="lxbtn">
                    <button class="tklxbtn" @click="goDuoXuan" style="width: 80%;">
                       <span class="tklxBtnWords">多选题</span>
                       <span class="tklxBtnWords">{{'('+duoXuan+'/'+duoXuanNum+')'}}</span>
                    </button>
                </el-row>
                <el-row type="flex" class="lxbtn">
                    <button class="tklxbtn" @click="goPanDuan" style="width: 80%;">
                       <span class="tklxBtnWords">判断题</span>
                       <span class="tklxBtnWords">{{'('+panDuan+'/'+panDuanNum+')'}}</span>
                    </button>
                </el-row>
                <!-- <el-row type="flex" class="lxbtn">
                    <button class="tklxbtn" style="width: 80%;">
                       <span class="tklxBtnWords">实操题</span>
                       <span class="tklxBtnWords">{{'('+shiCao+'/'+shiCaoNum+')'}}</span>
                    </button>
                </el-row> -->
                <!-- <el-row type="flex" class="lxbtn">
                    <button class="tklxbtn" @click="goTianKong" style="width: 80%;">
                       <span class="tklxBtnWords">填空题</span>
                       <span class="tklxBtnWords">{{'('+tianKong+'/'+tianKongNum+')'}}</span>
                    </button>
                </el-row>
                <el-row type="flex" class="lxbtn">
                    <button class="tklxbtn" @click="goLunShu" style="width: 80%;">
                       <span class="tklxBtnWords">论述题</span>
                       <span class="tklxBtnWords">{{'('+lunShu+'/'+lunShuNum+')'}}</span>
                    </button>
                </el-row> -->
                </el-row>
            </el-main>
        </el-container>
    </div>    
</template>

<script>
import backIcon from '../../assets/img/mine/back.png'
export default {
    data(){
        return{
            // tianKongNum:'',
            // tianKong:'',
            // shiCao:'0',
            // shiCaoNum:'0',
            danXuan:'',
            danXuanNum:'',
            duoXuan:'',
            duoXuanNum:'',
            panDuan:'',
            panDuanNum:'',
            // lunShu:'',
            // lunShuNum:'',
            id:1,
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
        }
    },
    mounted(){
        var id=this.$route.query.bankId;
        this.id=id;

        var bg = document.getElementById("background");
       // this.normalHeight=document.documentElement.clientHeight;
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("lxtxHead");
        var headHeight=this.normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("lxtxMain");
        var mainHeight=this.normalHeight/30 *24 ;
        main.style.height=mainHeight+"px";

        this.getTiXing();
    },
    methods:{
        getTiXing(){
            var URL=this.IP.IP+'/questionBank/questionInformationGeneral';
            this.$ajax({
                    method:'get',
                    url:URL,
                    params: {
                        id:this.id,
                    },
                }).then(response =>{
                    var i=0;
                    for(i=0;i<response.data.data.length;i++){
                        if(response.data.data[i].type=='单选'){
                            this.danXuan=response.data.data[i].answerNumber;
                            this.danXuanNum=response.data.data[i].allNumber;
                        }else if(response.data.data[i].type=='多选'){
                            this.duoXuan=response.data.data[i].answerNumber;
                            this.duoXuanNum=response.data.data[i].allNumber;
                        }else if(response.data.data[i].type=='判断'){
                            this.panDuan=response.data.data[i].answerNumber;
                            this.panDuanNum=response.data.data[i].allNumber;
                        }
                        // else if(response.data.data[i].type=='填空'){
                        //     this.tianKong=response.data.data[i].answerNumber;
                        //     this.tianKongNum=response.data.data[i].allNumber;
                        // }else{
                        //     this.lunShu=response.data.data[i].answerNumber;
                        //     this.lunShuNum=response.data.data[i].allNumber;
                        // }
                    }
                console.log(response.data.data);
                }).catch(error => {
                console.log('sad');
                });
        },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        goDanXuan(){
            this.$router.push({
                path:'/tiKu/danXuanTiMu',
                query:{
                    bankId:this.id
                }
            })
        },
        goDuoXuan(){
            console.log('题库ID'+this.bankId);
            this.$router.push({
                path:'/tiKu/duoXuanTiMu',
                query:{
                    bankId:this.id
                }
            })
        },
        goPanDuan(){
            this.$router.push({
                path:'/tiKu/panDuanTiMu',
                query:{
                    bankId:this.id
                }
            })
        },
        goTianKong(){
            this.$router.push({
                path:'/tiKu/tianKongTiMu',
                query:{
                    bankId:this.id
                }
            })
        },
        goLunShu(){
            this.$router.push({
                path:'/tiKu/lunShuTiMu',
                query:{
                    bankId:this.id
                }
            })
        },
    }
}
</script>

<style>
.tklx{
    position: relative;
    top:15%;
}
.lxbtn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.tklxBtnWords{
    /* text-align: left; */
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}
.tklxbtn{
    line-height: 40px;
    width: 80%;
    background-color: #53cdf5;
    border-style: none;
    outline: none;
    margin:15px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
#lxtxMain{
    padding: 0;
    background: #FFFFFF;
}
#lxtxHead {
  background-color: #53cdf5;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
